<script setup>
  import { onMounted, ref } from 'vue'
  import { onLoad, onReachBottom } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import { parseTime } from '@/utils/index.js'

  //tab
  const activeIndex = ref(1)
  const currentPage = ref(1)
  function chooseTab(name, title) {
    activeIndex.value = name
    currentPage.value = 1
    dataList.value = []
    getList()
  }

  const dataList = ref([])
  async function getList() {
    const res = await http.request({
      url: '/api/bidding/transactionLog',
      method: 'POST',
      data: {
        page: currentPage.value,
        limit: 10,
        in_type: activeIndex.value,
      },
    })
    dataList.value = [...dataList.value, ...res.data]
  }

  function getMoreNotice() {
    ++currentPage.value
    getList()
  }

  function getMoreDetail() {
    ++currentPage.value
    getList()
  }

  onMounted(() => {
    getList()
  })
</script>

<template>
  <view class="notice-content">
    <y-tabs v-model="activeIndex" sticky @change="chooseTab">
      <y-tab class="y-tab-virtual" :title="'收入明细'" name="1">
        <scroll-view
          scroll-y="true"
          class="scroll-Y"
          style="height: 90vh"
          @scrolltolower="getMoreNotice"
        >
          <view style="padding: 0 20rpx">
            <view
              class="come-item"
              v-for="(item, index) in dataList"
              :key="item.id"
            >
              <view class="come-item-left">
                <view class="" style="font-size: 28rpx">
                  {{ item.title }}
                </view>
                <view class="" style="font-size: 22rpx; color: #9b9b9d">
                  {{ parseTime(item.add_time) }}
                </view>
              </view>
              <view class="come-item-right">
                <view
                  class=""
                  style="
                    font-size: 28rpx;
                    font-weight: 700;
                    margin-right: 10rpx;
                  "
                >
                  {{ item.money }}
                </view>
                <image
                  src="@/static/xinshi.png"
                  style="width: 52rpx; height: 40rpx"
                  mode=""
                ></image>
              </view>
            </view>
          </view>
        </scroll-view>
      </y-tab>
      <y-tab class="y-tab-virtual" :title="'明细'" name="2">
        <scroll-view
          scroll-y="true"
          class="scroll-Y"
          style="height: 90vh"
          @scrolltolower="getMoreDetail"
        >
          <view style="padding: 0 20rpx">
            <view
              class="cash-item"
              v-for="(item, index) in dataList"
              :key="item.id"
            >
              <image
                src="../../static/zhifubbao.png"
                style="
                  width: 60rpx;
                  height: 60rpx;
                  margin-right: 30rpx;
                  border-radius: 50%;
                  flex-shrink: 0;
                "
                mode=""
              ></image>
              <view class="cash-item-right">
                <view class="">
                  <view class="" style="font-size: 28rpx">
                    {{ item.title }}
                  </view>
                  <view class="" style="font-size: 22rpx; color: #9b9b9d">
                    {{ parseTime(item.add_time) }}
                  </view>
                </view>
                <view class="" style="font-size: 28rpx; font-weight: 700">
                  {{ item.money }}
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </y-tab>
    </y-tabs>
  </view>
</template>

<style lang="scss" scoped>
  .notice-content {
    margin-top: 58rpx;
    .come-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 152rpx;
      border-bottom: 2rpx solid #f5f5f5;
      .come-item-right {
        display: flex;
        align-items: center;
      }
    }
    .cash-item {
      display: flex;
      align-items: center;
      .cash-item-right {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 152rpx;
        border-bottom: 2rpx solid #f5f5f5;
      }
    }
  }
  /* #ifdef MP-QQ || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-KUAISHOU */
  .y-tab-virtual {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
  }
  /* #endif */
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-426rpx)); /* 单个图片宽度 * 图片数量的一半 */
    }
  }
  ::v-deep .y-tabs {
    // padding-top: 30rpx;
    top: -30rpx;
    border-radius: 36rpx;
    // background-color: #fff;
  }
  ::v-deep .y-tabs__content {
    // height: 100vh;
    // overflow: auto !important;
  }
  ::v-deep .y-tab__pane {
    overflow: auto;
    // height: 100vh !important;
  }
  ::v-deep .y-tabs__wrap {
    background-color: #fff !important;
  }
  ::v-deep .y-tabs__scroll {
    width: 360rpx !important;
    height: 64rpx;
    left: 25%;
  }
  ::v-deep .y-tab {
    height: 64rpx !important;
    margin: 0 20rpx;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    z-index: 9 !important;
  }
  ::v-deep .y-tabs__nav {
    border-radius: 32rpx;
    background-color: #f7f7f7;
  }
  ::v-deep .y-tabs__nav .is-active {
    border-radius: 32rpx !important;
    margin: 0 !important;
    padding: 0 34rpx !important;
    background-color: $transaction-color !important;
    color: #3d3d3d !important;
    font-weight: 700;
  }
  ::v-deep .y-tab__text {
    font-size: 28rpx;
  }
  ::v-deep .y-tabs__bar {
    display: none !important;
    // width: 50% !important;
    // height: 100% !important;
    // transform: translate3d(0,0,0) !important;
    // border-radius: 32rpx !important;
    // bottom: 0 !important;
    // background-color: #7863ff !important;
  }
</style>
